<template>
    <div>
        我的页面组件
        <p>
            <input type="text" v-model="firstname">
        </p>
        <p>
            <input type="text" v-model="lastname">
        </p>
        <p>
            <input type="text" v-model="fullname">
        </p>
    </div>
    <!-- 使用全局组件 -->
    <globalCom></globalCom>
</template>

<script setup>
import { ref, computed } from 'vue'
const firstname = ref('');
const lastname = ref('');

// 定义一个计算属性值
const fullname = computed({
    get() {
        return firstname.value + lastname.value
    },
    set(newvalue) {
        console.log(newvalue);
        firstname.value = newvalue.substr(0, 1);
        lastname.value = newvalue.substr(1)
    }

})

</script>
<style scoped>

</style>